<template>
	<view>
		<u-navbar title="商户详情" :background="{ background: '#fb4535' }" title-color="#fff" back-icon-color="#fff">
			<view class="uNavBarRight" slot="right"
				  @tap="$u.route({ url: '/pages/rateChange/recordList', params:{id:userId,mercNm:mercNm}})">修改记录</view>
		</u-navbar>
		<view class="policySettingMain">
			<view class="policySettingBox">
				<view class="policySettingOne">
					<u-cell-item icon="account-fill" title="商户" :value="mercNm" :title-style="titleStyle"
								 :value-style="valueStyle" :arrow="false"></u-cell-item>
				</view>
				<view class="policySettingTwo">
					<view class="title flex align-center">
						<u-icon class="uIcon" name="setting-fill" color="#fb4535" size="48"></u-icon>
						费率设置
					</view>
					<view class="twoBox">
						<view class="formItem solid-bottom flex align-center justify-between"
							  v-for="(item,index) in rateList" :key="index">
							<view class="left flex align-center">
								<text>{{item.name}}</text>
								<text>{{item.value}}{{item.unit}}</text>
							</view>
							<view class="right flex align-center" v-if="item.name !='t0提现费'">
								<input type="digit"
									   :placeholder=" item.max ? item.min + '~' + item.max :'0~0'"
									   v-model="feeList[index]" :maxlength="item.code == 'dctop'? 5 : 4 "
									   :disabled="isSet == 1" />
								<u-icon name="edit-pen-fill" color="#fb4535" size="32" style="margin-left: 8rpx;">
								</u-icon>
							</view>
							<view class="right" v-if="item.name =='t0提现费'">
								<text @click="t0Show = true" class="r_input">{{feeList[feeList.length-1] + ' 元'}}</text>
								<u-select v-model="t0Show" mode="single-column" :list="chooseData"
										  @confirm="t0Choose" :mask-close-able="false" title="请选择"></u-select>
							</view>
						</view>
					</view>

					<u-button type="error" @click="submitRateTap">完成设置</u-button>

				</view>
			</view>

			<u-modal v-model="show" :content="content" show-cancel-button @confirm="confirm" confirm-color="#fb4535">
			</u-modal>
			<u-top-tips ref="uTips"></u-top-tips>
			<u-toast ref="uToast" />
			<toast></toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: "#333333",
					fontSize: "28rpx",
				},
				valueStyle: {
					color: "#333",
					fontSize: "28rpx",
					fontWeight: "bold"
				},

				show: false,
				content: "确认当前设置吗？",

				// 新增
				mercNm: '---',
				userId: '',

				isSet: 1,
				rateList: [{
					name: '借记卡费率',
					value: '0.00%'
				},
					{
						name: '借记卡封顶',
						value: '0.00元'
					},
					{
						name: '贷记卡费率',
						value: '0.00%'
					},
					{
						name: '银联扫码',
						value: '0.00%'
					},
					{
						name: '支付宝扫码',
						value: '0.00%'
					},
					{
						name: '微信扫码',
						value: '0.00%'
					},
					{
						name: 't0提现费',
						value: '0元'
					},
				],
				feeList: [],
				t0Show:false,
				chooseData:[{
					value: '1',
					label: '1'
				},
					{
						value: '2',
						label: '2'
					}],

			};
		},
		onLoad(options) {
			this.mercNm = options.mercNm;
			this.userId = options.mercAgtId;
			this.getProductFee();
			this.getMercT0Config()
		},
		methods: {
			// 获取产品相关费率
			getProductFee() {
				this.$u.api.merchantFeeDetail({
					mercId: this.userId,
				}).then((res) => {
					if (res.status == 200) {
						let datas = res.result.rateList
						this.rateList = datas
						this.feeList = res.result.feeList
						this.isSet = res.result.isModified

					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: "error",
							duration: "1400",
						});
						this.isSet = '',
								this.rateList = [{
									name: '借记卡费率',
									value: '0.00%'
								},
									{
										name: '借记卡封顶',
										value: '0.00元'
									},
									{
										name: '贷记卡费率',
										value: '0.00%'
									},
									{
										name: '银联扫码',
										value: '0.00%'
									},
									{
										name: '支付宝扫码',
										value: '0.00%'
									},
									{
										name: '微信扫码',
										value: '0.00%'
									},
									{
										name: 't0提现费',
										value: '0.00%'
									},
								]
					}
				})
						.catch((res) => {
							if (res.errMsg == "request:fail timeout") {
								this.$u.toast("请求超时，请重试!");
							} else if (res.errMsg == "request:fail") {
								this.$u.toast("请求失败，请重试");
							} else {
								this.$u.toast("请求失败，请重试");
							}
							this.$loading(false);
							setTimeout(() => {
								this.$u.route({
									type: "navigateBack",
									delta: 1,
								});
							}, 2000);
						});
			},

			// 获取t0选项值
			getMercT0Config(){
				this.$u.api.getMercT0Config().then((res)=>{
					if(res.status == 200){
						this.chooseData = res.result
					}
				})
			},
			t0Choose(e){
				console.log(e)
				this.feeList[this.feeList.length-1] = e[0].value
				console.log(this.feeList[this.feeList.length-1])
			},


			//政策设定提交
			submitRateTap() {
				if (this.isSet == 1) {
					this.$refs.uTips.show({
						title: "该商户已设置费率，一天只能修改一次！",
						type: "info",
						duration: "1500",
					});
					return;
				}
				let feeList = this.feeList
				let rateList = this.rateList
				for (let i in feeList) {
					let min = rateList[i].min
					let max = rateList[i].max
					let name = rateList[i].name
					let value = Number(feeList[i])
					if (feeList[i] === "") {
						this.$refs.uTips.show({
							title: "请输入" + name,
							type: "info",
							duration: "1500",
						});
						return;
					}
							// if (i == 't0') {
							// 	if (value != min && value != max) {
							// 		let title = ''
							// 		if (min == max) {
							// 			title = min
							// 		} else {
							// 			title = min + '或' + max
							// 		}
							// 		this.$refs.uTips.show({
							// 			title: 't0提现费只限输入' + title,
							// 			type: "info",
							// 			duration: "1500",
							// 		});
							// 		return;
							// 	}
					// }
					else {
						if (value < min || value > max) {
							this.$refs.uTips.show({
								title: name + '介于' + min + '~' + max,
								type: "info",
								duration: "1500",
							});
							return;
						}
					}
				}
				this.show = true;
			},

			confirm() {
				let params = {
					mercId: this.userId,
					feeList: JSON.stringify(this.feeList)
				};
				this.$u.api.changeMerchantFee(params).then((res) => {
					if (res.status == 200) {
						this.$refs.uToast.show({
							title: res.msg,
							type: "success",
						});
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					} else {
						this.$refs.uTips.show({
							title: res.msg,
							type: "info",
							duration: "2000",
						});
					}
				})
						.catch((res) => {
							if (res.errMsg == "request:fail timeout") {
								this.$u.toast("请求超时，请重试!");
							} else if (res.errMsg == "request:fail") {
								this.$u.toast("请求失败，请重试");
							} else {
								this.$u.toast("请求失败，请重试");
							}
							this.$loading(false);
							setTimeout(() => {
								this.$u.route({
									type: "navigateBack",
									delta: 1,
								});
							}, 2000);
						});
			},

		},
	};
</script>

<style lang="scss">
	.policySettingBox {
		.policySettingOne {
			background-color: #fff;
		}

		.tip {
			line-height: 80rpx;
			color: #f33;
			font-size: 28rpx;
			padding: 0 32rpx;
		}

		.policySettingTwo {
			padding: 30rpx 32rpx 50rpx;

			.title {
				height: 100rpx;
				font-size: 36rpx;
				color: $uni-text-color;

				.uIcon {
					margin-right: 10rpx;
				}
			}

			.twoBox {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 0 20rpx;
				margin-bottom: 30rpx;

				.formItem {
					height: 100rpx;
					padding: 0 30rpx;

					.left {
						text {
							display: block;
							font-size: 32rpx;
							color: $uni-text-color;
							margin-right: 28rpx;

							&:nth-of-type(1) {
								width: 200rpx;
								position: relative;
								top: -2rpx;
							}

							&:nth-of-type(2) {
								position: relative;
							}
						}
					}

					.right {
						width: 35%;
						position: relative;
						top: 2rpx;
						text-align: end;

						>text {
							font-size: 30rpx;
							color: #fb4535;
						}
					}
				}
			}

			>button {
				background-color: #fb4535;
				font-size: 32rpx;
				color: #fff;
				width: 100%;
				margin-top: 80rpx;

				&::after {
					border: none;
				}
			}
		}
	}

	.uNavBarRight {
		padding-right: 30rpx;
		color: #fff;
	}
	.r_input {
		color: #fb4535;
		align-self: flex-end;
		padding-right: 8rpx;
	}
</style>
